<script setup lang="ts">
import { onMounted, ref } from "vue";
// 类别下拉的 选项集
const type_select_option = ref([]);
onMounted(() => {
  newFormInline.value.region = thoroughfare_select_option[2].value;
  thoroughfareChange(newFormInline.value.region);
});

// 声明 props 类型
export interface variablesFormProps {
  formInline: {
    region: string; // 通道
    type: string; //类别
    newAddress: number; //寄存器地址
    num: number; //数量
  };
}

// 声明 props 默认值
// 推荐阅读：https://cn.vuejs.org/guide/typescript/composition-api.html#typing-component-props
const props = withDefaults(defineProps<variablesFormProps>(), {
  formInline: () => ({
    region: "",
    type: "",
    newAddress: 0,
    num: 1
  })
});

// vue 规定所有的 prop 都遵循着单向绑定原则，直接修改 prop 时，Vue 会抛出警告。此处的写法仅仅是为了消除警告。
// 因为对一个 reactive 对象执行 ref，返回 Ref 对象的 value 值仍为传入的 reactive 对象，
// 即 newFormInline === props.formInline 为 true，所以此处代码的实际效果，仍是直接修改 props.formInline。
// 但该写法仅适用于 props.formInline 是一个对象类型的情况，原始类型需抛出事件
// 推荐阅读：https://cn.vuejs.org/guide/components/props.html#one-way-data-flow
const newFormInline = ref(props.formInline);
const thoroughfare_select_option = [
  { label: "01 Coil Status (0x)", value: "0x" },
  { label: "02 Input Status (1x)", value: "1x" },
  { label: "03 Holding Register (4x)", value: "4x" },
  { label: "04 Input Registers (3x)", value: "3x" },
  { label: "9x-Intermediate variable", value: "9x" }
];
const type_Bool_select_option = [{ label: "Bool", value: "Bool" }];
const type_usually_select_option = [
  { label: "Int16", value: "Int16" },
  { label: "Uint16", value: "Uint16" },
  { label: "Int32", value: "Int32" },
  { label: "Uint32", value: "Uint32" },
  { label: "Int64", value: "Int64" },
  { label: "Uint64", value: "Uint64" },
  { label: "Float", value: "Float" },
  { label: "Double", value: "Double" },
  { label: "SBCD16", value: "SBCD16" },
  { label: "BCD16", value: "BCD16" },
  { label: "SBCD32", value: "SBCD32" },
  { label: "BCD32", value: "BCD32" },
  { label: "SBCD64", value: "SBCD64" },
  { label: "BCD64", value: "BCD64" },
  { label: "U16_00", value: "U16_00" },
  { label: "U16_01", value: "U16_01" },
  { label: "U16_02", value: "U16_02" },
  { label: "U16_03", value: "U16_03" },
  { label: "U16_04", value: "U16_04" },
  { label: "U16_05", value: "U16_05" },
  { label: "U16_06", value: "U16_06" },
  { label: "U16_07", value: "U16_07" },
  { label: "U16_08", value: "U16_08" },
  { label: "U16_09", value: "U16_09" },
  { label: "U16_10", value: "U16_10" },
  { label: "U16_11", value: "U16_11" },
  { label: "U16_12", value: "U16_12" },
  { label: "U16_13", value: "U16_13" },
  { label: "U16_14", value: "U16_14" },
  { label: "U16_15", value: "U16_15" },
  { label: "HEX", value: "HEX" },
  { label: "Str", value: "Str" }
];
const thoroughfareChange = item => {
  console.log("通道的值", item);
  const prefix = item.slice(0, 2);
  switch (prefix) {
    case "0x":
    case "1x":
      type_select_option.value = type_Bool_select_option;
      newFormInline.value.type = type_select_option.value[0].value;
      break;
    case "4x":
    case "3x":
    case "9x":
      type_select_option.value = type_usually_select_option;
      newFormInline.value.type = type_select_option.value[1].value;

      break;
    default:
      console.warn("未知前缀:", prefix);
  }
};
// 修改通讯接口  执行的
</script>

<template>
  <el-form :model="newFormInline" class="add_form">
    <el-form-item label="通道">
      <el-select
        v-model="newFormInline.region"
        class="!w-[220px]"
        placeholder="请选择"
        @change="thoroughfareChange(newFormInline.region)"
      >
        <el-option
          v-for="(item, index) in thoroughfare_select_option"
          :key="index"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="数据类型">
      <el-select
        v-model="newFormInline.type"
        class="!w-[220px]"
        placeholder="请选择"
      >
        <el-option
          v-for="(item, index) in type_select_option"
          :key="index"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>

    <el-form-item label="寄存器地址">
      <el-input
        v-model="newFormInline.newAddress"
        type="number"
        class="!w-[220px]"
        placeholder="请输入寄存器地址"
      />
    </el-form-item>
    <el-form-item label="数量">
      <el-input
        v-model="newFormInline.num"
        type="number"
        class="!w-[220px]"
        placeholder="请输入数量"
      />
    </el-form-item>
  </el-form>
</template>
<style lang="scss" scoped>
.add_form :deep(.el-form-item__label) {
  width: 130px !important;
}
</style>
